<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Longest Substring Without Repeating Characters</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h2>Longest Substring Without Repeating Characters</h2>
    <div class="container">
        <div id="chart"></div>
        <div class="status">
            <div>Left: <span id="left">0</span></div>
            <div>Right: <span id="right">0</span></div>
            <div>Current Length: <span id="current-length">0</span></div>
            <div>Max Length: <span id="max-length">0</span></div>
        </div>
    </div>
    <button onclick="startAnimation()">Start Animation</button>
    <button onclick="togglePause()">Pause/Resume</button>
    <script src="script.js"></script>
</body>
</html>


<style>
 body {
    font-family: Arial, sans-serif;
    padding: 20px;
    max-width: 100%;
    overflow-x: hidden;
}

.container {
    position: relative;
    height: 400px;
    margin: 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
}

.bar {
    position: absolute;
    bottom: 0;
    background: #b3d9ff;
    transition: all 0.3s;
    text-align: center;
}

.water {
    position: absolute;
    bottom: 0;
    background: rgba(0, 191, 255, 0.5);
    transition: all 0.3s;
}

.longest-water {
    background: rgba(255, 105, 180, 0.5); /* 浅红色 */
}

.pointer {
    position: absolute;
    bottom: -20px;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    transition: all 0.3s;
}

#left-pointer { background: #ff4444; }
#right-pointer { background: #4444ff; }

.status {
    padding: 10px;
    background: #f0f0f0;
    margin: 10px 0;
}


</style>

<script>
let isPaused = false;
let animationSpeed = 500; // 动画速度（毫秒）
const s = "abcabcbb"; // 示例输入数据

// 初始化动画
function initChart() {
    const container = document.getElementById('chart');
    container.innerHTML = '';
    const barWidth = container.offsetWidth / s.length;

    s.split('').forEach((char, i) => {
        const bar = document.createElement('div');
        bar.className = 'bar';
        bar.style.width = barWidth + 'px';
        bar.style.height = '20px'; // 固定高度
        bar.style.left = (i * barWidth) + 'px';
        bar.textContent = char;
        container.appendChild(bar);
    });

    // 创建指针
    ['left', 'right'].forEach(ptr => {
        const pointer = document.createElement('div');
        pointer.className = `pointer ${ptr}-pointer`;
        pointer.id = `${ptr}-pointer`;
        container.appendChild(pointer);
    });
}

// 更新指针位置
function updatePointers(left, right) {
    const container = document.getElementById('chart');
    const barWidth = container.offsetWidth / s.length;

    document.getElementById('left-pointer').style.left = (left * barWidth) + 'px';
    document.getElementById('right-pointer').style.left = (right * barWidth) + 'px';
}

// 显示当前窗口
function highlightWindow(left, right, isLongest = false) {
    const container = document.getElementById('chart');
    const barWidth = container.offsetWidth / s.length;

    const water = document.createElement('div');
    water.className = 'water' + (isLongest ? ' longest-water' : '');
    water.style.width = (right - left) * barWidth + 'px';
    water.style.height = '20px';
    water.style.left = (left * barWidth) + 'px';
    container.appendChild(water);
}

// 更新状态栏
function updateStatus(left, right, currentLength, maxLength) {
    document.getElementById('left').textContent = left;
    document.getElementById('right').textContent = right;
    document.getElementById('current-length').textContent = currentLength;
    document.getElementById('max-length').textContent = maxLength;
}

// 暂停/继续控制
function togglePause() {
    isPaused = !isPaused;
}

// 延迟函数
function delay() {
    return new Promise(resolve => setTimeout(resolve, animationSpeed));
}

// 处理暂停逻辑
async function handlePause() {
    while (isPaused) {
        await new Promise(resolve => requestAnimationFrame(resolve));
    }
}

// 主动画函数
async function runAnimation() {
    let left = 0;
    let right = 0;
    let res = new Set();
    let max_length = 0;
    let max_left = 0;
    let max_right = 0;

    while (right < s.length) {
        await handlePause();

        if (!res.has(s[right])) {
            res.add(s[right]);
            if (right - left + 1 > max_length) {
                max_length = right - left + 1;
                max_left = left;
                max_right = right + 1;
            }
            updateStatus(left, right, right - left + 1, max_length);
            highlightWindow(left, right + 1, right - left + 1 === max_length);
            right += 1;
        } else {
            res.delete(s[left]);
            left += 1;
        }

        updatePointers(left, right);
        await delay();
    }

    alert("Animation completed! Max length: " + max_length);
}

// 启动动画
function startAnimation() {
    initChart();
    runAnimation();
}

// 初始化
initChart();


</script>